<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>学生选题管理</el-breadcrumb-item>
      <el-breadcrumb-item>任务书详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <h1 style="margin:50px 100px" v-if="!isShowDetail">任务书还未下发，请不用着急噢!</h1>
      <el-form label-width="200px" size="medium" v-else>
        <el-form-item label="毕业论文课题名称 :">
          <el-input style="width: 70%;" :value="subjectDetail.name" readonly></el-input>
          <el-link style="margin-left: 20px" type="primary" :underline="false" @click.native="dialogVisible = true">显示详情</el-link>
        </el-form-item>
        <el-form-item label="任务书发布时间 : ">
          <el-input class="input" :value="$moment(assignment.updateTime).format('YYYY-MM-DD HH:mm:ss')" readonly></el-input> 
        </el-form-item> 
        <el-form-item label="研究的主要内容 : " >
          <el-input class="input" :value="assignment.research" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="涉及的知识和基本要求 : " >
          <el-input class="input" :value="assignment.command" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="本课题预期目标 : " >
          <el-input class="input" :value="assignment.goal" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="本课题进度安排 : ">
          <el-input class="input" :value="assignment.scheduling" readonly type="textarea" :rows="5"></el-input>
        </el-form-item> 
      </el-form>
      
    </el-card>
    <!-- 课题详情对话框 -->
    <el-dialog title="课题详情" :visible.sync="dialogVisible">
      <el-form label-width="80px" >
        <el-form-item label="课题名称">
          <el-input :value="subjectDetail.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题类型">
          <el-input :value="subjectDetail.type.label" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题来源">
          <el-input :value="subjectDetail.source.label" readonly></el-input>
        </el-form-item>
        <el-form-item label="发布教师">
          <el-input :value="`${tea.name} (${tea.id})`" readonly></el-input>
        </el-form-item>
        <el-form-item label="教师职称">
          <el-input :value="tea.job" readonly></el-input>
        </el-form-item> 
        <el-form-item label="教师电话">
          <el-input :value="tea.phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="教师邮箱">
          <el-input :value="tea.email" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题简介">
          <el-input :value="subjectDetail.introduce" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getStudentAssignment} from '../../axios/assignment'

  export default {
    name: 'StudentAssignmentView', // 学生任务书列表组件
    data() {
      return { 
        isShowDetail: true,
        dialogVisible: false,
        assignment:{}, 
        tea:{},
        subjectDetail: {
          type:{},
          source:{}
        }
      }
    },
    methods:{
      getAssignment(){
        // 有后端
        getStudentAssignment().then(res => {
          if(res.success){
            if(res.data === null){
              this.isShowDetail = false
              return 
            } 
            this.assignment = res.data.assignment
            this.subjectDetail = res.data.sub
            this.tea = res.data.tea
          } 
        })

        // 无后端，默认获取成功，模拟数据
        // this.assignmentList = [
        //   {
        //     id: 1,
        //     // stuId: 1,
        //     subId: 1, // 对应毕设课题 ID
        //     status: true,
        //     research: '我是前端的测试数据我是前端测试数据.......',
        //     command: 'JavaEE, SpringBoot, Redis, MySQL, vue, elementUI...',  // 涉及的知识和基本要求
        //     goal: '熟练掌握JavaWeb的相关知识，并了解技术前言框架的使用',
        //     scheduling: '第一周.....第二周....',
        //     attachment: '', // 附件下载地址
        //     publishTime: '2022-01-24', // 发布时间
        //     updateTiime: '2022-01-24', // 提交时间
        //     stu: {},    // 选择该课题的学生 (待定)
        //     tea: {id: 1, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},   // 发布老师
        //     sub: { // 对应毕设课题
        //             id: 1,
        //             name: '前端模拟数据测试',
        //             introduce: '测试测试测试测试测试测试',
        //             declareTime: '2021-01-21',
        //             source: {id: 1, label: '学生自拟'},
        //             type: {id: 1, label: '理论研究'},
        //             status: 1,
        //             stuId: 0, 
        //             teaId: 1,
        //           } 
        //   }
        // ]
        // 任务书还未下发的状态
        // this.assignmentList = []
      }
    },
    created(){
      this.getAssignment()
    }
  }
</script>

<style scoped>
   .el-form-item .el-input{
    width: 80%;
  }
  .el-form-item .el-textarea{
    width: 80%;
  }
</style>